<template>
  <div class="html1_10">
      <h1>1.10 HTML5的菜单交互标签</h1>
      <div class="html1_10_1">
        <h2>1.10.1 menu标签</h2>
        <p>
          <pre>
            定义和用法
&lt;menu> 标签定义命令的列表或菜单。&lt;menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。
提示：请使用 CSS 来设置菜单列表的样式！
          </pre>
        </p>
        <p class="tab">表2-10   menu标签常用的属性和取值</p>
        <table border="1px">
          <tr>
            <th>属性</th>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>Label</td>
            <td>text</td>
            <td>规定菜单的可见标签。</td>
          </tr>
          <tr>
            <td>type</td>
            <td>popup|toolbar</td>
            <td>规定要显示哪种菜单类型。</td>
          </tr>
        </table>
      </div>
      <div class="html1_10_2">
        <h2>1.10.2 menuitem标签</h2>
        <p>
          <pre>
            定义和用法
&lt;menuitem> 标签定义用户可以从弹出菜单调用的命令/菜单项目。
注：仅Firefox 8.0 以及更高的版本支持 &lt;menuitem> 标签。
          </pre>
        </p>
        <p class="tab">表2-10   menuitem标签常用的属性和取值</p>
        <table border="1px">
          <tr>
            <th>属性</th>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>checked</td>
            <td>checked</td>
            <td>规定在页面加载后选中命令/菜单项目。仅适用于type="radio"或 type="checkbox"。</td>
          </tr>
          <tr>
            <td>default	</td>
            <td>default</td>
            <td>把命令/菜单项设置为默认命令。</td>
          </tr>
          <tr>
            <td>disabled</td>
            <td>disabled</td>
            <td>规定命令/菜单项应该被禁用</td>
          </tr>
          <tr>
            <td>icon</td>
            <td>URL</td>
            <td>规定命令/菜单项的图标。</td>
          </tr>
          <tr>
            <td>open</td>
            <td>open</td>
            <td>定义 details 是否可见。</td>
          </tr>
          <tr>
            <td>label</td>
            <td>text</td>
            <td>必需。规定命令/菜单项的名称，以向用户显示。</td>
          </tr>
          <tr>
            <td>radiogroup</td>
            <td>groupname</td>
            <td>规定命令组的名称，命令组会在命令/菜单项本身被切换时进行切换。仅适用于 type="radio"</td>
          </tr>
          <tr>
            <td>type</td>
            <td>checkbox|command|radio</td>
            <td>规定命令/菜单项的类型。默认是 "command"。</td>
          </tr>
        </table>
        <P>
          <pre>
              &lt;div style="background:yellow;border:1px solid #cccccc;padding: 10px;" contextmenu="mymenu">
        &lt;p>请在框中右键点击，就可以看到快捷菜单！&lt;/p>
        &lt;menu type="context" id="mymenu">
            &lt;menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png">
            &lt;/menuitem>
            &lt;menu label="Share on...">
                &lt;menuitem label="Twitter" icon="ico_twitter.png"
                    onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);">
                &lt;/menuitem>
                &lt;menuitem label="Facebook" icon="ico_facebook.png"
                    onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);">
                &lt;/menuitem>
            &lt;/menu>
            &lt;menuitem label="Email This Page" onclick="window.location='mailto:?body='+window.location.href;">
            &lt;/menuitem>
        &lt;/menu>
    &lt;/div>
    &lt;p>本例只在 Firefox 中有效！&lt;/p>
          </pre>
        </P>
      </div>
      <div class="html1_10_3">
        <h2>1.10.3 command标签</h2>
        <p>
          <pre>
            定义和用法
command 元素表示用户能够调用的命令。&lt;command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当command元素位于menu元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。
注:只有 Internet Explorer 9 （更早或更晚的版本都不支持）支持&lt;command>标签。
          </pre>
        </p>
        <p class="tab">表2-10   command标签常用的属性和取值</p>
        <table border="1px">
          <tr>
            <th>属性</th>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>checked</td>
            <td>checked</td>
            <td>定义是否被选中。仅用于 radio 或 checkbox 类型。</td>
          </tr>
          <tr>
            <td>disabled</td>
            <td>disabled</td>
            <td>定义 command 是否可用。</td>
          </tr>
          <tr>
            <td>icon</td>
            <td>URL</td>
            <td>定义作为 command 来显示的图像的 url。</td>
          </tr>
          <tr>
            <td>label</td>
            <td>text</td>
            <td>为command定义可见的label。</td>
          </tr>
          <tr>
            <td>radiogroup</td>
            <td>groupname</td>
            <td>定义 command 所属的组名。仅在类型为 radio 时使用。</td>
          </tr>
          <tr>
            <td>type</td>
            <td>checkbox|command|radio</td>
            <td>定义该 command 的类型。默认是 "command"。</td>
          </tr>
        </table>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>